/**
 * 微场景样式
 * @author rubekid	
 */
html,body{height:100%;padding:0px;margin:0px;font-family:"Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;}
a{ text-decoration:none;}
/*为了消除选中时的虚线框*/
a{
	bblr:expression(this.onFocus=this.blur());/*IE使用*/
	outline-style:none;/*FF使用*/
}

body{
	position:relative;
	min-height:100%;
	overflow:hidden;
}

.loading{
	width:37px;
	height:37px;
	background-image:url('');
	background-repeat:no-repeat;
	background-size:contain;
	position:absolute;
	margin-top: -18px;
	margin-left:-18px;
	top:50%;
	left:50%;
}
.scene_container{
	position:relative;
	width:100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow:hidden;
	background: #000000;
}
.scene_container .loading_page{
	position:absolute;
	width:100%;
	height:100%;
	z-index:100;
}
.loading_page .half_top, .loading_page .half_bottom{
	background:#000000;
	position:absolute;
	left:0px;
	width:100%;

}

.loading_page .half_top{
	z-index:1;
	height:60%;
	top:0px;
}

.loading_page .half_bottom{
	height:50%;
	bottom:0px;
}

.loading_page .half_top.open{
	-webkit-animation:moveOutUp 1s ease 0s 1 both;
	-moz-animation:moveOutUp 1s ease 0s 1 both;
	-ms-animation:moveOutUp 1s ease 0s 1 both;
	-o-animation:moveOutUp 1s ease 0s 1 both;
	animation:moveOutUp 1s ease 0s 1 both;
}
.loading_page .half_bottom.open{
	-webkit-animation:moveOutDown 1s ease 0s 1 both;
	-moz-animation:moveOutDown 1s ease 0s 1 both;
	-ms-animation:moveOutDown 1s ease 0s 1 both;
	-o-animation:moveOutDown 1s ease 0s 1 both;
	animation:moveOutDown 1s ease 0s 1 both;
}
	


.loading_page .half_top h3{
	position:absolute;
	left:0;
	top:20%;
	width:100%;
	height:20px;
	line-height:20px;
	text-align:center;
	font-size:16px;
	color:#a9a9a9;
}

.loading_page .half_top .loading{
	top:auto;
	bottom:50px;
	margin-top:0px;
}
.loading_page .half_top  .percent{
	width:100px;
	height:24px;
	line-height:24px;
	text-align:center;
	position:absolute;
	left:50%;
	margin-left:-50px;
	bottom:10px;
	font-size:18px;
	color:#969696;
}

.scene_container .main_page{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
	
/*	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;*/
}
.scene_container .current_page{
	z-index: 4;
}
.scene_container .active_page{
	z-index: 5;
}
.scene_container .main_page .scene_bg{
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-size:100% 100%;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
}
.scene_container .element_wrapper{
	position:absolute;
	z-index: 1;
	font-size:1.4em;
	line-height:1.6em;
}
.scene_container .page_element{
	position:relative;
	display:block;
}
.scene_container .page_element pre{margin:0px;}

.page_transtion{
	-webkit-transition:-webkit-transform 0.4s linear;
	-moz-transition:-moz-transform 0.4s linear;
	-ms-transition:-ms-transform 0.4s linear;
	-o-transition:-o-transform 0.4s linear;
	transition:transform 0.4s linear;
}

.scene_container .cover_tip{
	width:100%;
	text-align:center;
	position: absolute;
	bottom:50px;
	z-index:3;
	font-size:1.4em;
}

.playing{
	animation:rotateIn 5s linear infinite;
	-webkit-animation:rotateIn 5s linear infinite;
	-moz-animation:rotateIn 5s linear infinite;
	-ms-animation:rotateIn 5s linear infinite;
	-o-animation:rotateIn 5s linear infinite;
}


.scene_music{
	width:32px;
	height:32px;
	background: url(../images/scene_music.png) no-repeat; 
	background-size:32px 32px; 
	position:absolute; 
	top:30px;
	right:10px;
	z-index:10;
}

.music_note{
	width:15px;
	height:25px;
	position:absolute;
	z-index:9;
	top:30px;
	right:10px;
	background:url(../images/note.png) no-repeat;
	background-size: 100% 100%;
}

.scene_arrow{
	width:30px;
	height:30px;
	background-repeat:no-repeat;
	background-size:30px 30px;
	position:absolute;
	z-index: 2;
}

.scene_arrow_r{
	background-image: url(../images/scene_arrow_r.png);
	top:50%;
	right:10px;
	margin-top:-15px;
	
	animation:fadeInRight 1.4s infinite;
	-webkit-animation:fadeInRight 1.4s infinite;
	-moz-animation:fadeInRight 1.4s infinite;
	-ms-animation:fadeInRight 1.4s infinite;
	-o-animation:fadeInRight 1.4s infinite;
}
.scene_arrow_t{
	background-image: url(../images/scene_arrow_t.png);
	bottom:20px;
	left:50%;
	margin-left:-15px;
	
	animation:fadeInUp 1.4s infinite;
	-webkit-animation:fadeInUp 1.4s infinite;
	-moz-animation:fadeInUp 1.4s infinite;
	-ms-animation:fadeInUp 1.4s infinite;
	-o-animation:fadeInUp 1.4s infinite;	
}

.scene_arrow_l{
	background-image: url(../images/scene_arrow_l.png);
	top:50%;
	left:10px;
	margin-top:-15px;
	
	animation:fadeInLeft 1.4s infinite;
	-webkit-animation:fadeInLeft 1.4s infinite;
	-moz-animation:fadeInLeft 1.4s infinite;
	-ms-animation:fadeInLeft 1.4s infinite;
	-o-animation:fadeInLeft 1.4s infinite;
}
.scene_arrow_b{
	background-image: url(../images/scene_arrow_d.png);
	top:20px; 
	left:50%;
	margin-left:-15px;
	
	animation:fadeInDown 1.4s infinite;
	-webkit-animation:fadeInDown 1.4s infinite;
	-moz-animation:fadeInDown 1.4s infinite;
	-ms-animation:fadeInDown 1.4s infinite;
	-o-animation:fadeInDown 1.4s infinite;	
}

.button_container{
	position: absolute;
}
.button_container .button_row{
	text-align: center;
}
.scene_button{
	height:30px;
	line-height: 30px;
	background-image:url('');
	background-repeat:repeat-x;
	padding:4px 12px;
	display:inline-block;
    -o-border-radius: 3px; 
    -ms-border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px;
    border-radius:3px;
    color:#FFFFFF;
    margin:8px;
    width:110px;
    text-align:center;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

.scene_image_button{
	background-repeat:no-repeat;
	background-size: 100% 100%;
	
}

.scene_button_1{
	border:1px solid #6cad41;
}
.scene_button_2{
	border:1px solid #ed6e83;
	background-position:0px -40px;
}
.scene_button_3{
	border:1px solid #999999;
	background-position:0px -80px;
	color:#555;
}
.scene_button_4{
	border:1px solid #b7cad5;
	background-position:0px -120px;
	color:#00b1b1;
}
.scene_button_5{
	border:1px solid #df8918;
	background-position:0px -160px;
	color:#a3330d;
}
.scene_button_6{
	border:1px solid #0d75c3;
	background-position:0px -200px;
}

.video_dialog{
	background-color:rgba(0,0,0,0.8);
	position: absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:11;
}
.video_dialog .btn_close_dialog{
	background-image: url(../images/close_white.png);
	display: block;
	position: absolute;
	right: 15px;
	top: 15px;
	width: 20px;
	height: 20px;
}

a.animate_item{color:#000000;}




/************动画效果**************/
.fade{
	animation:fade 2s infinite;
	-webkit-animation:fade 2s infinite;
	-moz-animation:fade 2s infinite;
	-ms-animation:fade 2s infinite;
	-o-animation:fade 2s infinite;
}


@keyframes fade {
	0%{
		opacity: 0.2;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 0.2;
	}
}

@-webkit-keyframes fade {
	0%{
		opacity: 0.2;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 0.2;
	}
}

@-moz-keyframes fade {
	0%{
		opacity: 0.2;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 0.2;
	}
}

@-ms-keyframes fade {
	0%{
		opacity: 0.2;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 0.2;
	}
}

@-o-keyframes fade {
	0%{
		opacity: 0.2;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 0.2;
	}
}




/**
 * 动画效果1
 * 淡入
 */
.fadeIn {
	-webkit-animation:fadeIn 2s ease 0s 1 both;
	-moz-animation:fadeIn 2s ease 0s 1 both;
	-ms-animation:fadeIn 2s ease 0s 1 both;
	-o-animation:fadeIn 2s ease 0s 1 both;
	animation:fadeIn 2s ease 0s 1 both;
}
@keyframes fadeIn {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

@-webkit-keyframes fadeIn {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

@-moz-keyframes fadeIn {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

@-ms-keyframes fadeIn {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

@-o-keyframes fadeIn {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}


/**
 * 从左到右 淡入
 */
.fadeInRight {
	-webkit-animation:fadeInRight 2s ease 0s 1 both;
	-moz-animation:fadeInRight 2s ease 0s 1 both;
	-ms-animation:fadeInRight 2s ease 0s 1 both;
	-o-animation:fadeInRight 2s ease 0s 1 both;
	animation:fadeInRight 2s ease 0s 1 both;
}

@keyframes fadeInRight {
	0%{
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}
	100%{
		opacity: 1;
		transform: none
	}
}

@-webkit-keyframes fadeInRight {
	0%{
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
	}
	100%{
		opacity: 1;
		-webkit-transform: none;
	}
}

@-moz-keyframes fadeInRight {
	0%{
		opacity: 0;
		-moz-transform: translate3d(-100%, 0, 0);
	}
	100%{
		opacity: 1;
		-moz-transform: none;
	}
}

@-ms-keyframes fadeInRight {
	0%{
		opacity: 0;
		-ms-transform: translate3d(-100%, 0, 0);
	}
	100%{
		opacity: 1;
		-ms-transform: none;
	}
}

@-o-keyframes fadeInRight {
	0%{
		opacity: 0;
		-o-transform: translate3d(-100%, 0, 0);
	}
	100%{
		opacity: 1;
		-o-transform: none;
	}
}

/**
 * 从右到左 淡入
 */
.fadeInLeft {
	-webkit-animation:fadeInLeft 2s ease 0s 1 both;
	-moz-animation:fadeInLeft 2s ease 0s 1 both;
	-ms-animation:fadeInLeft 2s ease 0s 1 both;
	-o-animation:fadeInLeft 2s ease 0s 1 both;
	animation:fadeInLeft 2s ease 0s 1 both;
}

@keyframes fadeInLeft {
	0%{
		opacity: 0;
		transform: translate3d(100%, 0, 0);
	}
	100%{
		opacity: 1;
		transform: none
	}
}
@-webkit-keyframes fadeInLeft {
	0%{
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
	}
	100%{
		opacity: 1;
		-webkit-transform: none;
	}
}
@-moz-keyframes fadeInLeft {
	0%{
		opacity: 0;
		-moz-transform: translate3d(100%, 0, 0);
	}
	100%{
		opacity: 1;
		-moz-transform: none;
	}
}
@-ms-keyframes fadeInLeft {
	0%{
		opacity: 0;
		-ms-transform: translate3d(100%, 0, 0);
	}
	100%{
		opacity: 1;
		-ms-transform: none;
	}
}
@-o-keyframes fadeInLeft {
	0%{
		opacity: 0;
		-o-transform: translate3d(100%, 0, 0);
	}
	100%{
		opacity: 1;
		-o-transform: none;
	}
}

/**
 * 从下到上 淡入
 */
.fadeInUp {
	-webkit-animation:fadeInUp 2s ease 0s 1 both;
	-moz-animation:fadeInUp 2s ease 0s 1 both;
	-ms-animation:fadeInUp 2s ease 0s 1 both;
	-o-animation:fadeInUp 2s ease 0s 1 both;
	animation:fadeInUp 2s ease 0s 1 both;
}

@keyframes fadeInUp {
	0%{
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}
	100%{
		opacity: 1;
		transform: none;
	}
}

@-webkit-keyframes fadeInUp {
	0%{
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
	}
	100%{
		opacity: 1;
		-webkit-transform: none;
	}
}

@-moz-keyframes fadeInUp {
	0%{
		opacity: 0;
		-moz-transform: translate3d(0, 100%, 0);
	}
	100%{
		opacity: 1;
		-moz-transform: none;
	}
}

@-ms-keyframes fadeInUp {
	0%{
		opacity: 0;
		-ms-transform: translate3d(0, 100%, 0);
	}
	100%{
		opacity: 1;
		-ms-transform: none;
	}
}

@-o-keyframes fadeInUp {
	0%{
		opacity: 0;
		-o-transform: translate3d(0, 100%, 0);
	}
	100%{
		opacity: 1;
		-o-transform: none;
	}
}

/**
 * 从上到下 淡入
 */
.fadeInDown {
	-webkit-animation:fadeInDown 2s ease 0s 1 both;
	-moz-animation:fadeInDown 2s ease 0s 1 both;
	-ms-animation:fadeInDown 2s ease 0s 1 both;
	-o-animation:fadeInDown 2s ease 0s 1 both;
	animation:fadeInDown 2s ease 0s 1 both;
}

@keyframes fadeInDown {
	0%{
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}
	100%{
		opacity: 1;
		transform: none;
	}
}

@-webkit-keyframes fadeInDown {
	0%{
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
	}
	100%{
		opacity: 1;
		-webkit-transform: none;
	}
}

@-moz-keyframes fadeInDown {
	0%{
		opacity: 0;
		-moz-transform: translate3d(0, -100%, 0);
	}
	100%{
		opacity: 1;
		-moz-transform: none;
	}
}

@-ms-keyframes fadeInDown {
	0%{
		opacity: 0;
		-ms-transform: translate3d(0, -100%, 0);
	}
	100%{
		opacity: 1;
		-ms-transform: none;
	}
}

@-o-keyframes fadeInDown {
	0%{
		opacity: 0;
		-o-transform: translate3d(0, -100%, 0);
	}
	100%{
		opacity: 1;
		-o-transform: none;
	}
}

/**
 * 动画效果 2 淡出
 */
.fadeOut {
	-webkit-animation:fadeOut 2s ease 0s 1 both;
	-moz-animation:fadeOut 2s ease 0s 1 both;
	-ms-animation:fadeOut 2s ease 0s 1 both;
	-o-animation:fadeOut 2s ease 0s 1 both;
	animation:fadeOut 2s ease 0s 1 both;
}
@keyframes fadeOut {
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@-webkit-keyframes fadeOut {
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@-moz-keyframes fadeOut {
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@-ms-keyframes fadeOut {
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@-o-keyframes fadeOut {
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}



/**
 * 动画效果3 移入
 */

/**
 * 从左到右 移入
 */
.moveInRight {
	-webkit-animation:moveInRight 2s ease 0s 1 both;
	-moz-animation:moveInRight 2s ease 0s 1 both;
	-ms-animation:moveInRight 2s ease 0s 1 both;
	-o-animation:moveInRight 2s ease 0s 1 both;
	animation:moveInRight 2s ease 0s 1 both;
}

@keyframes moveInRight {
	0%{
		transform: translate3d(-100%, 0, 0);
	}
	100%{
		transform: none;
	}
}
@-webkit-keyframes moveInRight {
	0%{
		-webkit-transform: translate3d(-100%, 0, 0);
	}
	100%{
		-webkit-transform: none;
	}
}
@-moz-keyframes moveInRight {
	0%{
		-moz-transform: translate3d(-100%, 0, 0);
	}
	100%{
		-moz-transform: none;
	}
}

@-ms-keyframes moveInRight {
	0%{
		-ms-transform: translate3d(-100%, 0, 0);
	}
	100%{
		-ms-transform: none;
	}
}

@-o-keyframes moveInRight {
	0%{
		-o-transform: translate3d(-100%, 0, 0);
	}
	100%{
		-o-transform: none;
	}
}


/**
 * 从右到左 移入
 */
.moveInLeft {
	-webkit-animation:moveInLeft 2s ease 0s 1 both;
	-moz-animation:moveInLeft 2s ease 0s 1 both;
	-ms-animation:moveInLeft 2s ease 0s 1 both;
	-o-animation:moveInLeft 2s ease 0s 1 both;
	animation:moveInLeft 2s ease 0s 1 both;
}

@keyframes moveInLeft {
	0%{
		transform: translate3d(100%, 0, 0);
	}
	100%{
		transform: none;
	}
}
@-webkit-keyframes moveInLeft {
	0%{
		-webkit-transform: translate3d(100%, 0, 0);
	}
	100%{
		-webkit-transform: none;
	}
}
@-moz-keyframes moveInLeft {
	0%{
		-moz-transform: translate3d(100%, 0, 0);
	}
	100%{
		-moz-transform: none;
	}
}
@-ms-keyframes moveInLeft {
	0%{
		-ms-transform: translate3d(100%, 0, 0);
	}
	100%{
		-ms-transform: none;
	}
}
@-o-keyframes moveInLeft {
	0%{
		-o-transform: translate3d(100%, 0, 0);
	}
	100%{
		-o-transform: none;
	}
}

/**
 * 从下到上 移入
 */
.moveInUp {
	-webkit-animation:moveInUp 2s ease 0s 1 both;
	-moz-animation:moveInUp 2s ease 0s 1 both;
	-ms-animation:moveInUp 2s ease 0s 1 both;
	-o-animation:moveInUp 2s ease 0s 1 both;
	animation:moveInUp 2s ease 0s 1 both;
}

@keyframes moveInUp {
	0%{
		transform: translate3d(0, 100%, 0);
	}
	100%{
		transform: none;
	}
}

@-webkit-keyframes moveInUp {
	0%{
		-webkit-transform: translate3d(0, 100%, 0);
	}
	100%{
		-webkit-transform: none;
	}
}

@-moz-keyframes moveInUp {
	0%{
		-moz-transform: translate3d(0, 100%, 0);
	}
	100%{
		-moz-transform: none;
	}
}
@-ms-keyframes moveInUp {
	0%{
		-ms-transform: translate3d(0, 100%, 0);
	}
	100%{
		-ms-transform: none;
	}
}
@-o-keyframes moveInUp {
	0%{
		-o-transform: translate3d(0, 100%, 0);
	}
	100%{
		-o-transform: none;
	}
}

/**
 * 从上到下 移入
 */
.moveInDown {
	-webkit-animation:moveInDown 2s ease 0s 1 both;
	-moz-animation:moveInDown 2s ease 0s 1 both;
	-ms-animation:moveInDown 2s ease 0s 1 both;
	-o-animation:moveInDown 2s ease 0s 1 both;
	animation:moveInDown 2s ease 0s 1 both;
}

@keyframes moveInDown {
	0%{
		transform: translate3d(0, -100%, 0);
	}
	100%{
		transform: none
	}
}

@-webkit-keyframes moveInDown {
	0%{
		-webkit-transform: translate3d(0, -100%, 0);
	}
	100%{
		-webkit-transform: none
	}
}

@-moz-keyframes moveInDown {
	0%{
		-moz-transform: translate3d(0, -100%, 0);
	}
	100%{
		-moz-transform: none
	}
}

@-ms-keyframes moveInDown {
	0%{
		-ms-transform: translate3d(0, -100%, 0);
	}
	100%{
		-ms-transform: none
	}
}

@-o-keyframes moveInDown {
	0%{
		-o-transform: translate3d(0, -100%, 0);
	}
	100%{
		-o-transform: none
	}
}

/**
 * 	从上移出 
 */

@keyframes moveOutUp {
	0%{
		transform: none;
	}
	100%{
		transform: translate3d(0, -100%, 0);
	}
}

@-webkit-keyframes moveOutUp {
	0%{
		-webkit-transform: none;
	}
	100%{
		-webkit-transform: translate3d(0, -100%, 0);
		
	}
}

@-moz-keyframes moveOutUp {
	0%{
		-moz-transform: none;
	}
	100%{
		-moz-transform: translate3d(0, -100%, 0);
	}
}
@-ms-keyframes moveOutUp {
	0%{
		-ms-transform: none;
	}
	100%{
		-ms-transform: translate3d(0, -100%, 0);
	}
}
@-o-keyframes moveOutUp {
	0%{
		-o-transform: none;
	}
	100%{
		-o-transform: translate3d(0, -100%, 0);
	}
}

@keyframes moveOutDown {
	0%{
		transform: none
	}
	100%{
		transform: translate3d(0, 100%, 0);
	}
}

@-webkit-keyframes moveOutDown {
	0%{
		-webkit-transform: none
	}
	100%{
		-webkit-transform: translate3d(0, 100%, 0);
	}
}

@-moz-keyframes moveOutDown {
	0%{
		-moz-transform: none
	}
	100%{
		-moz-transform: translate3d(0, 100%, 0);
	}
}

@-ms-keyframes moveOutDown {
	0%{
		-ms-transform: none
	}
	100%{
		-ms-transform: translate3d(0, 100%, 0);
	}
}

@-o-keyframes moveOutDown {
	0%{
		-o-transform: none
	}
	100%{
		-o-transform: translate3d(0, 100%, 0);
	}
}


/**
 * 动画效果4 
 * 中心弹入 
 */
.bounceIn {
	-webkit-animation:bounceIn 2s ease 0s 1 both;
	-moz-animation:bounceIn 2s ease 0s 1 both;
	-ms-animation:bounceIn 2s ease 0s 1 both;
	-o-animation:bounceIn 2s ease 0s 1 both;
	animation:bounceIn 2s ease 0s 1 both;
}
@keyframes bounceIn {
	0%, 20%, 40%, 60%, 80%, 100%{
		transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
	}
	0%{
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}
	20%{
		transform: scale3d(1.1, 1.1, 1.1);
	}
	40%{
		transform: scale3d(.9, .9, .9);
	}
	60%{
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}
	80%{
		transform: scale3d(.97, .97, .97);
	}
	100%{
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

@-webkit-keyframes bounceIn {
	0%, 20%, 40%, 60%, 80%, 100%{
		-webkit-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
	}
	0%{
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
	}
	20%{
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
	}
	40%{
		-webkit-transform: scale3d(.9, .9, .9);
	}
	60%{
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
	}
	80%{
		-webkit-transform: scale3d(.97, .97, .97);
	}
	100%{
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
	}
}

@-moz-keyframes bounceIn {
	0%, 20%, 40%, 60%, 80%, 100%{
		-moz-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
	}
	0%{
		opacity: 0;
		-moz-transform: scale3d(.3, .3, .3);
	}
	20%{
		-moz-transform: scale3d(1.1, 1.1, 1.1);
	}
	40%{
		-moz-transform: scale3d(.9, .9, .9);
	}
	60%{
		opacity: 1;
		-moz-transform: scale3d(1.03, 1.03, 1.03);
	}
	80%{
		-moz-transform: scale3d(.97, .97, .97);
	}
	100%{
		opacity: 1;
		-moz-transform: scale3d(1, 1, 1);
	}
}

@-ms-keyframes bounceIn {
	0%, 20%, 40%, 60%, 80%, 100%{
		-ms-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
	}
	0%{
		opacity: 0;
		-ms-transform: scale3d(.3, .3, .3);
	}
	20%{
		-ms-transform: scale3d(1.1, 1.1, 1.1);
	}
	40%{
		-ms-transform: scale3d(.9, .9, .9);
	}
	60%{
		opacity: 1;
		-ms-transform: scale3d(1.03, 1.03, 1.03);
	}
	80%{
		-ms-transform: scale3d(.97, .97, .97);
	}
	100%{
		opacity: 1;
		-ms-transform: scale3d(1, 1, 1);
	}
}

@-o-keyframes bounceIn {
	0%, 20%, 40%, 60%, 80%, 100%{
		-o-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
	}
	0%{
		opacity: 0;
		-o-transform: scale3d(.3, .3, .3);
	}
	20%{
		-o-transform: scale3d(1.1, 1.1, 1.1);
	}
	40%{
		-o-transform: scale3d(.9, .9, .9);
	}
	60%{
		opacity: 1;
		-o-transform: scale3d(1.03, 1.03, 1.03);
	}
	80%{
		-o-transform: scale3d(.97, .97, .97);
	}
	100%{
		opacity: 1;
		-o-transform: scale3d(1, 1, 1);
	}
}

/**
 * 	弹入 从左到右
 */
.bounceInRight {
	-webkit-animation:bounceInRight 2s ease 0s 1 both;
	-moz-animation:bounceInRight 2s ease 0s 1 both;
	-ms-animation:bounceInRight 2s ease 0s 1 both;
	-o-animation:bounceInRight 2s ease 0s 1 both;
	animation:bounceInRight 2s ease 0s 1 both;
}

@keyframes bounceInRight{
	0% , 60% , 75% , 90% , 100% {
		transition-timing-function:cubic- bezier(0.215, .610, .355, 1.000);
	}
	0% {
		opacity: 0;
		transform: translate3d(-3000px, 0, 0);
	}
	60% {
		opacity: 1;
		transform: translate3d(25px, 0, 0);
	}
	75% {
		transform: translate3d(-10px, 0, 0);
	}
	90% {
		transform: translate3d(5px, 0, 0);
	}
	100% {
		transform: none
	}
}
@-webkit-keyframes bounceInRight {
	0% , 60% , 75% , 90% , 100%{
		-webkit-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
	}
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-3000px, 0, 0);
	}
	60% {
		opacity: 1;
		-webkit-transform: translate3d(25px, 0, 0);
	}
	75% {
		-webkit-transform: translate3d(-10px, 0, 0);
	}
	90% {
		-webkit-transform: translate3d(5px, 0, 0);
	}
	100% {
		-webkit-transform: none;
	}
}
@-moz-keyframes bounceInRight {
	0% , 60% , 75% , 90% , 100%{
		-moz-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
	}
	0% {
		opacity: 0;
		-moz-transform: translate3d(-3000px, 0, 0);
	}
	60% {
		opacity: 1;
		-moz-transform: translate3d(25px, 0, 0);
	}
	75% {
		-moz-transform: translate3d(-10px, 0, 0);
	}
	90% {
		-moz-transform: translate3d(5px, 0, 0);
	}
	100% {
		-moz-transform: none;
	}
}
@-ms-keyframes bounceInRight {
	0% , 60% , 75% , 90% , 100%{
		-ms-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
	}
	0% {
		opacity: 0;
		-ms-transform: translate3d(-3000px, 0, 0);
	}
	60% {
		opacity: 1;
		-ms-transform: translate3d(25px, 0, 0);
	}
	75% {
		-ms-transform: translate3d(-10px, 0, 0);
	}
	90% {
		-ms-transform: translate3d(5px, 0, 0);
	}
	100% {
		-ms-transform: none;
	}
}
@-o-keyframes bounceInRight {
	0% , 60% , 75% , 90% , 100%{
		-o-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
	}
	0% {
		opacity: 0;
		-o-transform: translate3d(-3000px, 0, 0);
	}
	60% {
		opacity: 1;
		-o-transform: translate3d(25px, 0, 0);
	}
	75% {
		-o-transform: translate3d(-10px, 0, 0);
	}
	90% {
		-o-transform: translate3d(5px, 0, 0);
	}
	100% {
		-o-transform: none;
	}
}

/**
 * 	弹入 从右到左
 */
.bounceInLeft {
	-webkit-animation:bounceInLeft 2s ease 0s 1 both;
	-moz-animation:bounceInLeft 2s ease 0s 1 both;
	-ms-animation:bounceInLeft 2s ease 0s 1 both;
	-o-animation:bounceInLeft 2s ease 0s 1 both;
	animation:bounceInLeft 2s ease 0s 1 both;
}

@keyframes bounceInLeft {
	0%, 60%, 75% , 90%, 100%{
		transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000)
	}
	0%{
		opacity: 0;
		transform: translate3d(3000px, 0, 0);
	}
	60%{
		opacity: 1;
		transform: translate3d(-25px, 0, 0);
	}
	75% {
		transform: translate3d(10px, 0, 0);
	}
	90%{
		transform: translate3d(-5px, 0, 0);
	}
	100%{
		transform: none;
	}
}

@-webkit-keyframes bounceInLeft {
	0%, 60%, 75%, 90%, 100%{
		-webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);
	}
	0%{
		opacity: 0;
		-webkit-transform: translate3d(3000px, 0, 0);
	}
	60%{
		opacity: 1;
		-webkit-transform: translate3d(-25px, 0, 0);
	}
	75% {
		-webkit-transform: translate3d(10px, 0, 0);
	}
	90%{
		-webkit-transform: translate3d(-5px, 0, 0);
	}
	100%{
		-webkit-transform: none;
	}
}

@-moz-keyframes bounceInLeft {
	0%, 60%, 75%, 90%, 100%{
		-moz-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);
	}
	0%{
		opacity: 0;
		-moz-transform: translate3d(3000px, 0, 0);
	}
	60%{
		opacity: 1;
		-moz-transform: translate3d(-25px, 0, 0);
	}
	75% {
		-moz-transform: translate3d(10px, 0, 0);
	}
	90%{
		-moz-transform: translate3d(-5px, 0, 0);
	}
	100%{
		-moz-transform: none;
	}
}

@-ms-keyframes bounceInLeft {
	0%, 60%, 75%, 90%, 100%{
		-ms-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);
	}
	0%{
		opacity: 0;
		-ms-transform: translate3d(3000px, 0, 0);
	}
	60%{
		opacity: 1;
		-ms-transform: translate3d(-25px, 0, 0);
	}
	75% {
		-ms-transform: translate3d(10px, 0, 0);
	}
	90%{
		-ms-transform: translate3d(-5px, 0, 0);
	}
	100%{
		-ms-transform: none;
	}
}

@-o-keyframes bounceInLeft {
	0%, 60%, 75%, 90%, 100%{
		-o-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);
	}
	0%{
		opacity: 0;
		-o-transform: translate3d(3000px, 0, 0);
	}
	60%{
		opacity: 1;
		-o-transform: translate3d(-25px, 0, 0);
	}
	75% {
		-o-transform: translate3d(10px, 0, 0);
	}
	90%{
		-o-transform: translate3d(-5px, 0, 0);
	}
	100%{
		-o-transform: none;
	}
}

/**
 * 	弹出 从下到上
 */
.bounceInUp {
	-webkit-animation:bounceInUp 2s ease 0s 1 both;
	-moz-animation:bounceInUp 2s ease 0s 1 both;
	-ms-animation:bounceInUp 2s ease 0s 1 both;
	-o-animation:bounceInUp 2s ease 0s 1 both;
	animation:bounceInUp 2s ease 0s 1 both;
}

@keyframes bounceInUp {
	0%, 60%, 75% , 90%, 100%{
		transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000)
	}
	0%{
		opacity: 0;
		transform: translate3d(0, 3000px, 0);
	}
	60%{
		opacity: 1;
		transform: translate3d(0, -25px, 0);
	}
	75% {
		transform: translate3d(0, 10px, 0);
	}
	90%{
		transform: translate3d(0, -5px, 0);
	}
	100%{
		transform: none
	}
}

@-webkit-keyframes bounceInUp {
	0%, 60%, 75% , 90%, 100%{
		-webkit-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
	}
	0%{
		opacity: 0;
		-webkit-transform: translate3d(0, 3000px, 0);
	}
	60%{
		opacity: 1;
		-webkit-transform: translate3d(0, -25px, 0);
	}
	75% {
		-webkit-transform: translate3d(0, 10px, 0);
	}
	90%{
		-webkit-transform: translate3d(0, -5px, 0);
	}
	100%{
		-webkit-transform: none;
	}
}

@-moz-keyframes bounceInUp {
	0%, 60%, 75% , 90%, 100%{
		-moz-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
	}
	0%{
		opacity: 0;
		-moz-transform: translate3d(0, 3000px, 0);
	}
	60%{
		opacity: 1;
		-moz-transform: translate3d(0, -25px, 0);
	}
	75% {
		-moz-transform: translate3d(0, 10px, 0);
	}
	90%{
		-moz-transform: translate3d(0, -5px, 0);
	}
	100%{
		-moz-transform: none;
	}
}

@-ms-keyframes bounceInUp {
	0%, 60%, 75% , 90%, 100%{
		-ms-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
	}
	0%{
		opacity: 0;
		-ms-transform: translate3d(0, 3000px, 0);
	}
	60%{
		opacity: 1;
		-ms-transform: translate3d(0, -25px, 0);
	}
	75% {
		-ms-transform: translate3d(0, 10px, 0);
	}
	90%{
		-ms-transform: translate3d(0, -5px, 0);
	}
	100%{
		-ms-transform: none;
	}
}

@-o-keyframes bounceInUp {
	0%, 60%, 75% , 90%, 100%{
		-o-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
	}
	0%{
		opacity: 0;
		-o-transform: translate3d(0, 3000px, 0);
	}
	60%{
		opacity: 1;
		-o-transform: translate3d(0, -25px, 0);
	}
	75% {
		-o-transform: translate3d(0, 10px, 0);
	}
	90%{
		-o-transform: translate3d(0, -5px, 0);
	}
	100%{
		-o-transform: none;
	}
}


/**
 * 	弹入 从上到下
 */
.bounceInDown {
	-webkit-animation:bounceInDown 2s ease 0s 1 both;
	-moz-animation:bounceInDown 2s ease 0s 1 both;
	-ms-animation:bounceInDown 2s ease 0s 1 both;
	-o-animation:bounceInDown 2s ease 0s 1 both;
	animation:bounceInDown 2s ease 0s 1 both;
}

@keyframes bounceInDown {
	0%, 60%, 75% , 90%, 100%{
		transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
	}
	0%{
		opacity: 0;
		transform: translate3d(0, -3000px, 0);
	}
	60%{
		opacity: 1;
		transform: translate3d(0, 25px, 0);
	}
	75% {
		transform: translate3d(0, -10px, 0);
	}
	90%{
		transform: translate3d(0, 5px, 0);
	}
	100%{
		transform: none;
	}
}

@-webkit-keyframes bounceInDown {
	0%, 60%, 75% , 90%, 100%{
		-webkit-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
	}
	0%{
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
	}
	60%{
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
	}
	75% {
		-webkit-transform: translate3d(0, -10px, 0);
	}
	90%{
		-webkit-transform: translate3d(0, 5px, 0);
	}
	100%{
		-webkit-transform: none;
	}
}

@-moz-keyframes bounceInDown {
	0%, 60%, 75% , 90%, 100%{
		-moz-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
	}
	0%{
		opacity: 0;
		-moz-transform: translate3d(0, -3000px, 0);
	}
	60%{
		opacity: 1;
		-moz-transform: translate3d(0, 25px, 0);
	}
	75% {
		-moz-transform: translate3d(0, -10px, 0);
	}
	90%{
		-moz-transform: translate3d(0, 5px, 0);
	}
	100%{
		-moz-transform: none;
	}
}

@-ms-keyframes bounceInDown {
	0%, 60%, 75% , 90%, 100%{
		-ms-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
	}
	0%{
		opacity: 0;
		-ms-transform: translate3d(0, -3000px, 0);
	}
	60%{
		opacity: 1;
		-ms-transform: translate3d(0, 25px, 0);
	}
	75% {
		-ms-transform: translate3d(0, -10px, 0);
	}
	90%{
		-ms-transform: translate3d(0, 5px, 0);
	}
	100%{
		-ms-transform: none;
	}
}

@-o-keyframes bounceInDown {
	0%, 60%, 75% , 90%, 100%{
		-o-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
	}
	0%{
		opacity: 0;
		-o-transform: translate3d(0, -3000px, 0);
	}
	60%{
		opacity: 1;
		-o-transform: translate3d(0, 25px, 0);
	}
	75% {
		-o-transform: translate3d(0, -10px, 0);
	}
	90%{
		-o-transform: translate3d(0, 5px, 0);
	}
	100%{
		-o-transform: none;
	}
}


/**
 * 动画效果5 放大
 */
.zoomIn {
	-webkit-animation:zoomIn 2s ease 0s 1 both;
	-moz-animation:zoomIn 2s ease 0s 1 both;
	-ms-animation:zoomIn 2s ease 0s 1 both;
	-o-animation:zoomIn 2s ease 0s 1 both;
	animation:zoomIn 2s ease 0s 1 both;
}
@keyframes zoomIn {
	0%{
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}
	50%{
		opacity: 1
	}
}
@-webkit-keyframes zoomIn {
	0%{
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
	}
	50%{
		opacity: 1;
	}
}
@-moz-keyframes zoomIn {
	0%{
		opacity: 0;
		-moz-transform: scale3d(.3, .3, .3);
	}
	50%{
		opacity: 1;
	}
}
@-ms-keyframes zoomIn {
	0%{
		opacity: 0;
		-ms-transform: scale3d(.3, .3, .3);
	}
	50%{
		opacity: 1;
	}
}
@-o-keyframes zoomIn {
	0%{
		opacity: 0;
		-o-transform: scale3d(.3, .3, .3);
	}
	50%{
		opacity: 1;
	}
}



/**
 * 动画效果 6
 * 翻滚进入
 */
.rollIn {
	-webkit-animation:rollIn 2s ease 0s 1 both;
	-moz-animation:rollIn 2s ease 0s 1 both;
	-ms-animation:rollIn 2s ease 0s 1 both;
	-o-animation:rollIn 2s ease 0s 1 both;
	animation:rollIn 2s ease 0s 1 both;
}

@keyframes rollIn {
	0%{
		opacity: 0;
		transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
	}
	100%{
		opacity: 1;
		transform: none
	}
}

@-webkit-keyframes rollIn {
	0%{
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
	}
	100%{
		opacity: 1;
		-webkit-transform: none;
	}
}
@-moz-keyframes rollIn {
	0%{
		opacity: 0;
		-moz-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
	}
	100%{
		opacity: 1;
		-moz-transform: none;
	}
}
@-ms-keyframes rollIn {
	0%{
		opacity: 0;
		-ms-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
	}
	100%{
		opacity: 1;
		-ms-transform: none;
	}
}
@-o-keyframes rollIn {
	0%{
		opacity: 0;
		-o-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
	}
	100%{
		opacity: 1;
		-o-transform: none;
	}
}

/**
 * 动画效果7
 * 光速进入
 */
.lightSpeedIn {
	-webkit-animation:lightSpeedIn 2s ease 0s 1 both;
	-moz-animation:lightSpeedIn 2s ease 0s 1 both;
	-ms-animation:lightSpeedIn 2s ease 0s 1 both;
	-o-animation:lightSpeedIn 2s ease 0s 1 both;
	animation:lightSpeedIn 2s ease 0s 1 both;
}


@keyframes lightSpeedIn {
	0%{
		transform: translate3d(100%, 0, 0) skewX(-30deg);
		opacity: 0;
	}
	60%{
		transform: skewX(20deg);
		opacity: 1;
	}
	80%{
		transform: skewX(-5deg);
		opacity: 1;
	}
	100%{
		transform: none;
		opacity: 1
	}
}

@-webkit-keyframes lightSpeedIn {
	0%{
		-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
		opacity: 0
	}
	60%{
		-webkit-transform: skewX(20deg);
		opacity: 1
	}
	80%{
		-webkit-transform: skewX(-5deg);
		opacity: 1
	}
	100%{
		-webkit-transform: none;
		opacity: 1
	}
}


@-moz-keyframes lightSpeedIn {
	0%{
		-moz-transform: translate3d(100%, 0, 0) skewX(-30deg);
		opacity: 0
	}
	60%{
		-moz-transform: skewX(20deg);
		opacity: 1
	}
	80%{
		-moz-transform: skewX(-5deg);
		opacity: 1
	}
	100%{
		-moz-transform: none;
		opacity: 1
	}
}


@-ms-keyframes lightSpeedIn {
	0%{
		-ms-transform: translate3d(100%, 0, 0) skewX(-30deg);
		opacity: 0
	}
	60%{
		-ms-transform: skewX(20deg);
		opacity: 1
	}
	80%{
		-ms-transform: skewX(-5deg);
		opacity: 1
	}
	100%{
		-ms-transform: none;
		opacity: 1
	}
}


@-o-keyframes lightSpeedIn {
	0%{
		-o-transform: translate3d(100%, 0, 0) skewX(-30deg);
		opacity: 0
	}
	60%{
		-o-transform: skewX(20deg);
		opacity: 1
	}
	80%{
		-o-transform: skewX(-5deg);
		opacity: 1
	}
	100%{
		-o-transform: none;
		opacity: 1
	}
}

/**
 * 动画效果8
 * 摇摆
 */
.wobble {
	-webkit-animation:wobble 2s ease 0s 1 backwards;
	-moz-animation:wobble 2s ease 0s 1 backwards;
	-ms-animation:wobble 2s ease 0s 1 backwards;
	-o-animation:wobble 2s ease 0s 1 backwards;
	animation:wobble 2s ease 0s 1 backwards;
}
@keyframes wobble {
	0%{
		transform: none
	}
	15% {
		transform: translate3d(-25% , 0, 0) rotate3d(0, 0, 1, -5deg)
	}
	30%{
		transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
	}
	45% {
		transform: translate3d(-15% , 0, 0) rotate3d(0, 0, 1, -3deg)
	}
	60%{
		transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
	}
	75% {
		transform: translate3d(-5% , 0, 0) rotate3d(0, 0, 1, -1deg)
	}
	100%{
		transform: none
	}
}
@-webkit-keyframes wobble {
	0%{
		-webkit-transform: none;
	}
	15% {
		-webkit-transform: translate3d(-25% , 0, 0) rotate3d(0, 0, 1, -5deg);
	}
	30%{
		-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
	}
	45% {
		-webkit-transform: translate3d(-15% , 0, 0) rotate3d(0, 0, 1, -3deg);
	}
	60%{
		-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
	}
	75% {
		-webkit-transform: translate3d(-5% , 0, 0) rotate3d(0, 0, 1, -1deg);
	}
	100%{
		-webkit-transform: none;
	}
}
@-moz-keyframes wobble {
	0%{
		-moz-transform: none;
	}
	15% {
		-moz-transform: translate3d(-25% , 0, 0) rotate3d(0, 0, 1, -5deg);
	}
	30%{
		-moz-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
	}
	45% {
		-moz-transform: translate3d(-15% , 0, 0) rotate3d(0, 0, 1, -3deg);
	}
	60%{
		-moz-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
	}
	75% {
		-moz-transform: translate3d(-5% , 0, 0) rotate3d(0, 0, 1, -1deg);
	}
	100%{
		-moz-transform: none;
	}
}
@-ms-keyframes wobble {
	0%{
		-ms-transform: none;
	}
	15% {
		-ms-transform: translate3d(-25% , 0, 0) rotate3d(0, 0, 1, -5deg);
	}
	30%{
		-ms-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
	}
	45% {
		-ms-transform: translate3d(-15% , 0, 0) rotate3d(0, 0, 1, -3deg);
	}
	60%{
		-ms-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
	}
	75% {
		-ms-transform: translate3d(-5% , 0, 0) rotate3d(0, 0, 1, -1deg);
	}
	100%{
		-ms-transform: none;
	}
}
@-o-keyframes wobble {
	0%{
		-o-transform: none;
	}
	15% {
		-o-transform: translate3d(-25% , 0, 0) rotate3d(0, 0, 1, -5deg);
	}
	30%{
		-o-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
	}
	45% {
		-o-transform: translate3d(-15% , 0, 0) rotate3d(0, 0, 1, -3deg);
	}
	60%{
		-o-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
	}
	75% {
		-o-transform: translate3d(-5% , 0, 0) rotate3d(0, 0, 1, -1deg);
	}
	100%{
		-o-transform: none;
	}
}



/**
 * 动画效果9
 * 抖动
 */
.rubberBand {
	-webkit-animation:rubberBand 2s ease 0s 1 both;
	-moz-animation:rubberBand 2s ease 0s 1 both;
	-ms-animation:rubberBand 2s ease 0s 1 both;
	-o-animation:rubberBand 2s ease 0s 1 both;
	animation:rubberBand 2s ease 0s 1 both;
}
@keyframes rubberBand {
	0%{
		transform: scale3d(1, 1, 1)
	}
	30%{
		transform: scale3d(1.25, .75, 1)
	}
	40%{
		transform: scale3d(0.75, 1.25, 1)
	}
	50%{
		transform: scale3d(1.15, .85, 1)
	}
	65% {
		transform: scale3d(.95, 1.05, 1)
	}
	75% {
		transform: scale3d(1.05, .95, 1)
	}
	100%{
		transform: scale3d(1, 1, 1)
	}
}
@-webkit-keyframes rubberBand {
	0%{
		-webkit-transform: scale3d(1, 1, 1);
	}
	30%{
		-webkit-transform: scale3d(1.25, .75, 1);
	}
	40%{
		-webkit-transform: scale3d(0.75, 1.25, 1);
	}
	50%{
		-webkit-transform: scale3d(1.15, .85, 1);
	}
	65% {
		-webkit-transform: scale3d(.95, 1.05, 1);
	}
	75% {
		-webkit-transform: scale3d(1.05, .95, 1);
	}
	100%{
		-webkit-transform: scale3d(1, 1, 1);
	}
}
@-moz-keyframes rubberBand {
	0%{
		-moz-transform: scale3d(1, 1, 1);
	}
	30%{
		-moz-transform: scale3d(1.25, .75, 1);
	}
	40%{
		-moz-transform: scale3d(0.75, 1.25, 1);
	}
	50%{
		-moz-transform: scale3d(1.15, .85, 1);
	}
	65% {
		-moz-transform: scale3d(.95, 1.05, 1);
	}
	75% {
		-moz-transform: scale3d(1.05, .95, 1);
	}
	100%{
		-moz-transform: scale3d(1, 1, 1);
	}
}
@-ms-keyframes rubberBand {
	0%{
		-ms-transform: scale3d(1, 1, 1);
	}
	30%{
		-ms-transform: scale3d(1.25, .75, 1);
	}
	40%{
		-ms-transform: scale3d(0.75, 1.25, 1);
	}
	50%{
		-ms-transform: scale3d(1.15, .85, 1);
	}
	65% {
		-ms-transform: scale3d(.95, 1.05, 1);
	}
	75% {
		-ms-transform: scale3d(1.05, .95, 1);
	}
	100%{
		-ms-transform: scale3d(1, 1, 1);
	}
}
@-o-keyframes rubberBand {
	0%{
		-o-transform: scale3d(1, 1, 1);
	}
	30%{
		-o-transform: scale3d(1.25, .75, 1);
	}
	40%{
		-o-transform: scale3d(0.75, 1.25, 1);
	}
	50%{
		-o-transform: scale3d(1.15, .85, 1);
	}
	65% {
		-o-transform: scale3d(.95, 1.05, 1);
	}
	75% {
		-o-transform: scale3d(1.05, .95, 1);
	}
	100%{
		-o-transform: scale3d(1, 1, 1);
	}
}


/**
 * 动画效果10
 * 旋转
 */
.rotateIn {
	-webkit-animation:rotateIn 2s ease 0s 1 both;
	-moz-animation:rotateIn 2s ease 0s 1 both;
	-ms-animation:rotateIn 2s ease 0s 1 both;
	-o-animation:rotateIn 2s ease 0s 1 both;
	animation:rotateIn 2s ease 0s 1 both;
}
@keyframes rotateIn {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg)
	}
}
@-webkit-keyframes rotateIn {
	from {
		-webkit-transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(360deg)
	}
}
@-moz-keyframes rotateIn {
	from {
		-moz-transform: rotate(0deg)
	}
	to {
		-moz-transform: rotate(360deg)
	}
}
@-ms-keyframes rotateIn {
	from {
		-ms-transform: rotate(0deg)
	}
	to {
		-ms-transform: rotate(360deg)
	}
}
@-o-keyframes rotateIn {
	from {
		-o-transform: rotate(0deg)
	}
	to {
		-o-transform: rotate(360deg)
	}
}


/**
 * 动画效果11
 * 翻转
 */
.flip {
	-webkit-animation:flip 2s ease 0s 1 both;
	-moz-animation:flip 2s ease 0s 1 both;
	-ms-animation:flip 2s ease 0s 1 both;
	-o-animation:flip 2s ease 0s 1 both;
	animation:flip 2s ease 0s 1 both;
}
@keyframes flip {
	0%{
		transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
		animation-timing-function :ease-out;
	}
	40%{
		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
		animation-timing-function :ease-out;
	}
	50%{
		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
		animation-timing-function :ease-in;
	}
	80%{
		transform: perspective(400px) scale3d(.95, .95, .95);
		animation-timing-function :ease-in;
	}
	100%{
		transform: perspective(400px);
		animation-timing-function :ease-in;
	}
}
@-webkit-keyframes flip {
	0%{
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
		-webkit-animation-timing-function :ease-out;
	}
	40%{
		-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
		-webkit-animation-timing-function :ease-out;
	}
	50%{
		-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
		-webkit-animation-timing-function :ease-in ;
	}
	80%{
		-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
		-webkit-animation-timing-function :ease-in ;
	}
	100%{
		-webkit-transform: perspective(400px);
		-webkit-animation-timing-function :ease-in ;
	}
}

@-moz-keyframes flip {
	0%{
		-moz-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
		-moz-animation-timing-function :ease-out;
	}
	40%{
		-moz-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
		-moz-animation-timing-function :ease-out;
	}
	50%{
		-moz-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
		-moz-animation-timing-function :ease-in ;
	}
	80%{
		-moz-transform: perspective(400px) scale3d(.95, .95, .95);
		-moz-animation-timing-function :ease-in ;
	}
	100%{
		-moz-transform: perspective(400px);
		-moz-animation-timing-function :ease-in ;
	}
}

@-ms-keyframes flip {
	0%{
		-ms-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
		-ms-animation-timing-function :ease-out;
	}
	40%{
		-ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
		-ms-animation-timing-function :ease-out;
	}
	50%{
		-ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
		-ms-animation-timing-function :ease-in ;
	}
	80%{
		-ms-transform: perspective(400px) scale3d(.95, .95, .95);
		-ms-animation-timing-function :ease-in ;
	}
	100%{
		-ms-transform: perspective(400px);
		-ms-animation-timing-function :ease-in ;
	}
}

@-o-keyframes flip {
	0%{
		-o-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
		-o-animation-timing-function :ease-out;
	}
	40%{
		-o-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
		-o-animation-timing-function :ease-out;
	}
	50%{
		-o-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
		-o-animation-timing-function :ease-in ;
	}
	80%{
		-o-transform: perspective(400px) scale3d(.95, .95, .95);
		-o-animation-timing-function :ease-in ;
	}
	100%{
		-o-transform: perspective(400px);
		-o-animation-timing-function :ease-in ;
	}
}


/**
 * 动画效果12
 * 悬摆
 */
.swing {
	-webkit-animation:swing 2s ease 0s 1 backwards;
	-moz-animation:swing 2s ease 0s 1 backwards;
	-ms-animation:swing 2s ease 0s 1 backwards;
	-o-animation:swing 2s ease 0s 1 backwards;
	animation:swing 2s ease 0s 1 backwards;
	
	-webkit-transform-origin: top center;
	-moz-transform-origin: top center;
	-ms-transform-origin: top center;
	-o-transform-origin: top center;
	transform-origin: top center;
}
@keyframes swing {
	20%{
		transform: rotate3d(0, 0, 1, 30deg);
	}
	40%{
		transform: rotate3d(0, 0, 1, -20deg);
	}
	60%{
		transform: rotate3d(0, 0, 1, 10deg);
	}
	80%{
		transform: rotate3d(0, 0, 1, -10deg);
	}
	100%{
		transform: rotate3d(0, 0, 1, 0deg);
	}
}

@-webkit-keyframes swing {
	20%{
		-webkit-transform: rotate3d(0, 0, 1, 30deg);
	}
	40%{
		-webkit-transform: rotate3d(0, 0, 1, -20deg);
	}
	60%{
		-webkit-transform: rotate3d(0, 0, 1, 10deg);
	}
	80%{
		-webkit-transform: rotate3d(0, 0, 1, -10deg);
	}
	100%{
		-webkit-transform: rotate3d(0, 0, 1, 0deg);
	}
}

@-moz-keyframes swing {
	20%{
		-moz-transform: rotate3d(0, 0, 1, 15deg);
	}
	40%{
		-moz-transform: rotate3d(0, 0, 1, -10deg);
	}
	60%{
		-moz-transform: rotate3d(0, 0, 1, 5deg);
	}
	80%{
		-moz-transform: rotate3d(0, 0, 1, -5deg);
	}
	100%{
		-moz-transform: rotate3d(0, 0, 1, 0deg);
	}
}

@-ms-keyframes swing {
	20%{
		-ms-transform: rotate3d(0, 0, 1, 15deg);
	}
	40%{
		-ms-transform: rotate3d(0, 0, 1, -10deg);
	}
	60%{
		-ms-transform: rotate3d(0, 0, 1, 5deg);
	}
	80%{
		-ms-transform: rotate3d(0, 0, 1, -5deg);
	}
	100%{
		-ms-transform: rotate3d(0, 0, 1, 0deg);
	}
}

@-o-keyframes swing {
	20%{
		-o-transform: rotate3d(0, 0, 1, 15deg);
	}
	40%{
		-o-transform: rotate3d(0, 0, 1, -10deg);
	}
	60%{
		-o-transform: rotate3d(0, 0, 1, 5deg);
	}
	80%{
		-o-transform: rotate3d(0, 0, 1, -5deg);
	}
	100%{
		-o-transform: rotate3d(0, 0, 1, 0deg);
	}
}


/**
 * 动画效果13
 * 旋转消失
 */
.flipOut {
	-webkit-animation:flipOut 2s ease 0s 1 both;
	-moz-animation:flipOut 2s ease 0s 1 both;
	-ms-animation:flipOut 2s ease 0s 1 both;
	-o-animation:flipOut 2s ease 0s 1 both;
	animation:flipOut 2s ease 0s 1 both;
}
@keyframes flipOut {
	0%{
		transform: perspective(400px);
	}
	30%{
		transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
		opacity: 1;
	}
	100%{
		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		opacity: 0;
	}
}

@-webkit-keyframes flipOut {
	0%{
		-webkit-transform: perspective(400px);
	}
	30%{
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
		opacity: 1
	}
	100%{
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		opacity: 0
	}
}

@-moz-keyframes flipOut {
	0%{
		-moz-transform: perspective(400px);
	}
	30%{
		-moz-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
		opacity: 1
	}
	100%{
		-moz-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		opacity: 0
	}
}
@-ms-keyframes flipOut {
	0%{
		-ms-transform: perspective(400px);
	}
	30%{
		-ms-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
		opacity: 1
	}
	100%{
		-ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		opacity: 0
	}
}
@-o-keyframes flipOut {
	0%{
		-o-transform: perspective(400px);
	}
	30%{
		-o-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
		opacity: 1
	}
	100%{
		-o-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		opacity: 0
	}
}


/**
 * 动画效果 14
 * 心跳
 */
.heartbeat {
	-webkit-animation:heartbeat 2s ease 0s 1 both;
	-moz-animation:heartbeat 2s ease 0s 1 both;
	-ms-animation:heartbeat 2s ease 0s 1 both;
	-o-animation:heartbeat 2s ease 0s 1 both;
	animation:heartbeat 2s ease 0s 1 both;
}
@keyframes heartbeat {
	0%{
		transform: scale(1);
	}
	50%{
		transform: scale(1.5);
	}
	100%{
		transform: scale(1);
	}
}
@-webkit-keyframes heartbeat {
	0%{
		-webkit-transform: scale(1);
	}
	50%{
		-webkit-transform: scale(1.5);
	}
	100%{
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}
@-moz-keyframes heartbeat {
	0%{
		-moz-transform: scale(1);
	}
	50%{
		-moz-transform: scale(1.5);
	}
	100%{
		-moz-transform: scale(1);
		transform: scale(1)
	}
}
@-ms-keyframes heartbeat {
	0%{
		-ms-transform: scale(1);
	}
	50%{
		-ms-transform: scale(1.5);
	}
	100%{
		-ms-transform: scale(1);
		transform: scale(1)
	}
}
@-o-keyframes heartbeat {
	0%{
		-o-transform: scale(1);
	}
	50%{
		-o-transform: scale(1.5);
	}
	100%{
		-o-transform: scale(1);
		transform: scale(1)
	}
}

/************动画效果 End**************/



/***********视频页面***********/
.scene_video{width:100%; max-height:240px; overflow:hidden; position:relative; text-align:center;}
.scene_video .video_btn{width:58px; height:58px; background:url(../images/video_icon.png) no-repeat; background-size:58px 58px; position:absolute; top:50%; left:50%; margin-top:-29px; margin-left:-29px;}
.scene_video img{max-width:100%;max-height:100%;}
@media (max-width:319px) {
.scene_video{max-height: 240px; overflow:hidden;}
}
@media (min-width:360px) {
.scene_video{max-height: 260px; overflow:hidden;}
}
@media (min-width:560px) {
.scene_video{max-height: 375px; overflow:hidden;}
}
@media (min-width:580px) {
.scene_video{max-height: 386px; overflow:hidden;}
}
@media (min-width:640px) {
.scene_video{max-height: 420px; overflow:hidden;}
}
@media (min-width:720px) {
.scene_video{max-height: 465px; overflow:hidden;}
}
@media (min-width:800px) {
.scene_video{max-height: 510px; overflow:hidden;}
}
@media (min-width:960px) {
.scene_video{max-height: 600px; overflow:hidden;}
}
@media (min-width:1120px) {
.scene_video{max-height: 690px; overflow:hidden;}
}
@media (min-width:1280px) {
.scene_video{max-height: 780px; overflow:hidden;}
}
.scene_video_txt{padding:10px; line-height:1.6em; word-break: break-all; word-wrap: break-word;}
.scene_video_txt h2{font-size:1.4em; color:#000; font-weight:bold; line-height:1.8em;}
.scene_video_txt p{font-weight:normal; font-size:1.4em;}

/*************视频页面 end*****************/

.share_img img{width:320px;}






